<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .container {
            width: 500px;
            /* height:500px; */
            background-color: rgb(174, 214, 133);
            /* overflow: hidden;
            clear: both; */
        }
        .container::after{  /*container类的伪类的写法*/
            content:'';
            /* overflow:hidden; */
            display: block;
            clear:both;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(114, 114, 179);
            margin: 5px;
            float: left;
        }

        .text {
            width: 100px;
            height: 100px;
            background-color: rgb(220, 145, 228);
            /*clear: both;  给收到影响的元素设置 clear属性，有 left、right、both三个值，分别表示清除左浮动、清除有浮动、清除所有浮动。配合着给父元素设置高度的方法使用。*/
        }
        .text1{
            width: 100px;
            height: 100px;
            background-color: rgb(140, 209, 230);
            /* overflow:hidden;
            clear:both; */
            clear: both;
        }
    </style>
</head>

<body>
    <div>
        <p>浮动元素会造成父元素高度塌陷，后续元素也会受到影响。</p>
        <p>浮动的副作用：当元素设置 float浮动后，该元素就会脱离文档流并向左右浮动。</p>
        <p>1、浮动会造成父元素高度塌陷。<br>2、后续元素会受到影响。</p>
        <p><br>清除浮动的方法有 4种：</p>
        <p>1、父元素设置高度：如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小。</p>
        <p>2、受影响的元素添加 clear属性：给收到影响的元素设置 clear属性，有 left、right、both三个值，分别表示清除左浮动、清除有浮动、清除所有浮动。配合着给父元素设置高度的方法使用。</p>
        <p>3、overflow清除浮动：如果父元素塌陷，并且同级元素也收到影响，可以使用 verflow清除浮动。这种情况下，父布局不能设置高度，父级标签样式里加 overflow: hidden; clear: both。
        </p>
        <span>这种方法是哪个元素出现了问题就在哪个里面加: overflow: hidden; clear: both;</span>
        <p>4、伪对象方式：如果有父级塌陷，并且同级元素也受到了影响，还可以使用伪对象方式处理。为父标签添加伪类 after，设置空的内容，并且使用 clear: both。这种情况下，父布局不能设置高度。</p>
    </div>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="text1"></div>
    </div>
    <div class="text"></div>
</body>

</html>